<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header>
    <!-- 自适应圆点 -->
<div id="menu-bars" class="fas fa-bars"></div>

        <!-- 导航 -->
		<nav class="navbar">
			<div class="logo">
				<img src="./images/logo.png" alt="">
			</div>
			<br>
			<br>
			<br>
			<a href="#home">首页</a>
			<a href="#about">关于我</a>
			<a href="#skill">我的技能</a>
			<a href="#works">作品集</a>
			<a href="#picture">照片墙</a>
			<a href="#contact">联系我</a>
			<a href="https://gitee.com/liu-meixi_0/java">仓库</a>
		</nav>
	</header>



<!-- 主页介绍 -->
<section class="home" id="home">
    <div class="content">
        <div class="title">
            <h4><br>这是我的<span id = "text">555</span><br></h4>
        </div>
        <p class="text"> 我把所有的作品和未完成的作业都会放在这里 </p>
        <a href="#about" class="btn">关于我</a>
    </div>
    <div class="image">
        <img src="./images/图层 1.png" alt="">
    </div> 
    <script>
        const words = ["个人网站"];
        const text = document.getElementById("text");
        let wordIndex = 0;
        let charIndex = 0; 
        let isDelete = false;
        let DefaultDelay = 100;
        let WaitDelay = 700;
        let delay = 100;
        const UpdateText = () =>
        {
            text.textContent = words[wordIndex].substring(0,charIndex);   
            if(!isDelete)
            {
                delay = DefaultDelay;
                charIndex++;
                if(charIndex-1==words[wordIndex].length)
                {
                    delay = WaitDelay;
                    isDelete = true;
                }
            }
            else if(isDelete)
            {
                delay = DefaultDelay;
                charIndex--;
                if(charIndex<1)
                {
                    isDelete = false;
                    wordIndex++;
                    if(wordIndex>=words.length)
                        wordIndex = 0;
                }        
            }
            setTimeout(UpdateText,delay);
        };
        UpdateText();
</script>
</section>

<!-- 关于我 -->

<section class="about" id="about">

<h1 class="heading"> 关于 <span> 我 </span> </h1>

<div class="row-1">

    <div class="image">
        <img src="./images/微信图片_20240619185040.jpg" alt="">
    </div>

    <div class="content">
        <h3> 我叫刘美希 </h3>
        <p>我目前是顺德的一名即将大二的学生，高中学过PS,AI,CDR。目前对UI设计感兴趣。</p>
        <div class="box-about">
            <div class="box">
                <p> <span> 年龄 : </span> 20 </p>
                <p> <span> 性别 : </span> 女 </p>
                <p> <span> 生日 : </span> 2004.06.25 </p>
                <p> <span> 地址 : </span> 河南省信阳市 </p>
            </div>
            <div class="box">
                <p> <span> 手机号 : </span> 185*****6 </p>
                <p> <span> 邮箱 : </span> 24*******3@qq.com </p>
                <p> <span> 微信 : </span> L********6 </p>
                <p> <span> QQ : </span> 243*******2 </p>
            </div>
        </div>
    </div>

</div>

<!-- 技能 -->
<section class="skill" id="skill">
<h1 class="heading"> <span> 我的 </span> 技能 </h1>
<div class="row-2">

    <div class="skills">
        <div class="progress">
            <h3> UI <span> 65% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3> ps <span> 70% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3>AI<span> 60% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3> CDR <span> 60% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3> java <span> 25% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
        <div class="progress">
            <h3> css <span> 55% </span> </h3>
            <div class="bar"> <span></span> </div>
        </div>
    </div>
</div>


</section>


<!-- 作品集 -->

<section class="works" id="works">
<h1 class="heading"> <span> 我的 </span> 作品集 </h1>

    <div class="box-works">
        <div class="box11">
        <div class="box">
            <img src="./images/小游戏.png" alt="">
            <h3>小游戏</h3>
            <p>这是一个记忆消消乐的小游戏，我负责的UI设计和加载开始和规则介绍页。</p>
            <button><a href="./小游戏(2)/小游戏/开始界面.html">进入</button></a>
        </div>
    </div>

    <div class="box11">
        <div class="box">
            <img src="./images/服装网站.png" alt="">
            <h3>服装网站</h3>
            <p>这是一个服装网站，我负责的是UI设计和最后调整，占比太大了，就不放在这了</p>
            <button><a href="#">暂无</button></a>
        </div>
    </div>

    
    <div class="box11">
        <div class="box">
            <img src="./images/学习网站.png" alt="">
            <h3>学习网站</h3>
            <p>这是一个学习英语的网站，我负责的是UI设计和最后的样式调整，目前还在做...</p>
            <button><a href="#">暂无</button></a>
        </div>
    </div>


        <div class="box11">
        <div class="box">
            <img src="./images/拟态网页.png" alt="">
            <h3>拟态网页</h3>
            <p>这是一个拟态首页，我负责的是开发和设计，目前还在做...</p>
            <button><a href="./网站首页/首页.html">进入</button></a>
        </div>
    </div>

    
    <div class="box11">
        <div class="box">
            <img src="./images/微信图片_20240619185742.jpg" alt="">
            <h3>开发中</h3>
            <p>这是一个什么什么网站，我负责的是什么什么</p>
            <button><a href="#">暂无</button></a>
        </div>
    </div>


        <div class="box11">
        <div class="box">
            <img src="./images/微信图片_20240619185742.jpg" alt="">
            <h3>开发中</h3>
            <p>这是一个什么什么网站，我负责的是什么什么</p>
            <button><a href="#">暂无</button></a>
        </div>
    </div>

    </div>

</section>


<!-- 照片墙 -->

<section class="picture" id="picture">

    <h1 class="heading"> <span> 我的 </span> 照片墙 </h1>

    <div class="box-picture">

        
    <div class="container">
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>你挡路了!</p>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>彼岸…葬送！</p>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>等得太久，小心煞气枯竭。</p>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>悉数…奉还！</p>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>此番美景，我虽求而不得……</p>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>刃</h2>
                <p>却能，邀诸位共赏</p>
            </div>
        </div>

</section>


<!-- 联系我 -->
<section class="contact" id="contact">

    <h1 class="heading"> 联系 <span> 我 </span> </h1>

    <div class="icons-container">

        <div class="icons">
            <h3>我的邮箱</h3>
            <p>aaaa@gmail.com</p>
            <p>bbbbb@gmail.com</p>
        </div>

        <div class="icons">
            <h3>我的手机号</h3>
            <p>185*******6</p>
            <p>************</p>
        </div>

        <div class="icons">
            <h3>我的地址</h3>
            <p>广东省深圳市南山区</p>
        </div>

    </div>

    <div class="row">

        <form action="">

            <input type="text" placeholder="名字" class="box">
            <input type="email" placeholder="邮件" class="box">
            <input type="phone" placeholder="手机号" class="box">

            <textarea name="" placeholder="信息" id="" cols="30" rows="10"></textarea>

            <input type="submit" class="btn" value="提交">

        </form>


    </div>


</section>

<!-- contact section ends -->

<!-- footer section  -->
<footer class="footer"> @Copyright <span> liumeixi </span></footer>






















<!-- custom js file link  -->
<script src="js/打字个人网站.js"></script>
<script src="js/script.js"></script>

</body>
</html>